<template>
  <div :style="styleExternalIcon" class="svg-external-icon svg-icon" />
</template>

<script setup>

//默认的cdnSVG 地址
const props = defineProps({
  iconClass: { type: String, required: true },
  asText: { type: Boolean, default: false },
})
const isExternal = computed(() => {
  return /^(https?:|mailto:|tel:)/.test(props.iconClass)
})
const styleExternalIcon = computed(() => {
  const url = isExternal.value ? props.iconClass : `${svgUrl}${props.iconClass}`
  const exColor = {
    background: `url(${url}) no-repeat 50% 50% / 1em`,
  }
  const exText = {
    mask: `url(${url}) no-repeat 50% 50%`,
    '-webkit-mask': `url(${url}) no-repeat 50% 50%`,
  }
  return props.asText ? exText : exColor
})

definePageConfig({
  navigationBarTitleText: '图标',
})
</script>

<style lang="stylus">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
}

.svg-icon.text {
  fill: currentColor;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
